<template lang="html">
  <el-container class="view-book-layout view-container">
    <el-aside width="300px" class="view-book-aside view-aside">
      <BookList @chose-book="choseBook" />
    </el-aside>
    <el-main class="view-book-main view-main">
      <BookChapter ref="bookChapter" />
    </el-main>
  </el-container>
</template>
<script setup>
import BookList from './components/BookshelfList.vue'
import BookChapter from './components/BookChapter.vue';
import { ref } from 'vue';
let currentBook = undefined // 当前书籍

const bookChapter = ref(); // 章节组件

function choseBook(book) {
  if (currentBook && book.bookId == currentBook.bookId) {
    return false
  }
  currentBook = book;
  bookChapter.value.choseBook(book)
}

</script>

<style lang="less" scoped>
.view-book-aside {
  margin-right: 10px;
}
</style>
